<!-- <! DOCTYPE html> -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form action="">
    <div class="one">
    <div  id="todo">
      <input type="text" placeholder="请输入你的任务名称,按确认键" class="two" id="inputtext"><input type="button" value="确定" onclick="handleClick(event)" class="b">
    </div>
      <div class="three" id="todogroup">
        <ul>
            <li ><label ><input type="checkbox" name="select" id="" class="four">吃饭</label><input type="button" class="five" value="删除"></li>
            <li><label ><input type="checkbox" name="select" id="" class="four">睡觉</label><input type="button" class="five" value="删除"></li>
            <li><label ><input type="checkbox" name="select" id="" class="four">滑雪</label><input type="button" class="five" value="删除"></li>
            <li><label ><input type="checkbox" name="select" id="" class="four">看书</label><input type="button" class="five" value="删除" ></li> 
        </ul>
    </div>
    <label ><input type="checkbox" name="" id="" class="sex">已完成0/全部0</label><input type="button" class="seven" value="清除已完成任务">
    </div>
   </form>
</body>
<script lang="javascript">
    var intCnt = 0;
    function handleClick(e){
        var temp = getValue();
        // var div = document.createElement('div');
        // div.innerText = temp;
        // document.getElementById("group").append(div);
   
        //
    //   document.getElementById("todogroup").innerHTML += "<div id = 'todo"+ intCnt + "'><input type = 'checkbox' name = 'todocheck'>"
    //     + temp + "<button type = 'button' onclick = 'deletByIndex(" + intCnt + ")'>删除</button></div>";
    //   document.getElementById("inputtext").value = "";
    //   intCnt++;

        document.getElementById("todogroup").innerHTML += "<div id = 'todo"+ intCnt + "'><li style='list-style: none;border-bottom:1px solid #eaeaea ;'><label ><input type='checkbox' name='select' class='four'>"
        + temp +"</label><input type='button' class='five' value='删除' onclick = 'deletByIndex(" + intCnt + ")' style='float: right;background-color: #e04e4a;border: none;'></li>";
      document.getElementById("inputtext").value = "";
      intCnt++;
    }
function getValue(){
    var temp = document.getElementById("inputtext");
    console.log(temp.value);
    return temp.value;
}
function deletByIndex(index){
      document.getElementById("todo" + index).remove();
    }
function init(){
    document.getElementById("button").onclick=handleClick;
}
</script>
<style>
    *{
    margin: 0;
    padding: 0;
}
.one{
    margin: 50px auto;
    width: 500px;
    /* height: 240px; */
    /* background-color: pink; */
    border: 3px solid #efefef ;
    box-sizing: border-box;
    border-radius:10px;
}
.two{
    margin-top: 10px;
    border-radius:10px;
    overflow: hidden;
    margin-left: 13px;
    width: 450px;
    height: 30px;
    box-sizing: border-box;
    border:2px solid #c1d9de;
}
.one .b{
    height:25px;
    background-color: #e04e4a;
    border: none;
}
.one .b:hover{
    background-color: orangered;
}
.three{
    margin-top: 18px;
    margin-left: 12px;
    overflow: hidden;
    width: 474px;
    /* height: 126px; */
    /* background-color: skyblue; */
    border:1px solid #eaeaea;
    box-sizing: border-box;

}
ul li{
    list-style: none;

}
.three ul li{
height: 30px;
border-bottom:1px solid #eaeaea ;
line-height: 30px;
}
.three ul li .four{
margin-left: 8px;
/* background-color: #cdcdcd; */
}
.three ul li .five{
  display: none;  
margin: 3px;
float: right;
width: 45px;
height: 25px;
border: none;
background-color: #e04e4a;
}
.three ul li:hover{
background-color: #eaeaea;
}
.three ul li:hover .five{
display: block; 
}
.sex{
margin-left: 16px;
margin-top: 26px;
}
.three ul li .five:hover{
background-color: orangered;
}
.seven{
float: right;
margin-top: 20px;
margin-right:10px;
width: 102px;
height: 25px;
background-color: #e04e4a;
border: none;
}
.seven:hover{
background-color: orangered;
}
</style>
</html>